<template>
	<view class="container">
		
		<view class="header">
			<st-top-search searchType="1" placeholder="搜索商品名称"></st-top-search>
			
			<!-- 筛选栏 -->
			<view class="filter-tip-bar">
				<view class="filter-tip-bar__item" :class="currentFilter === 1 ? 'active' : ''" @click="getCurrentItem(1)">全部订单</view>
				<view class="filter-tip-bar__item" :class="currentFilter === 2 ? 'active' : ''" @click="getCurrentItem(2)">订单状态</view>
				<view class="filter-tip-bar__item" :class="currentFilter === 3 ? 'active' : ''" @click="getCurrentItem(3)">产品类型</view>
				<view class="filter-tip-bar__item" :class="currentFilter === 4 ? 'active' : ''" @click="getCurrentItem(4)">排序</view>
			</view>
		</view>

		<view class="table-view-block search-top">
			<view class="distribution-product-group">
				<view class="distribution-product-group__item" v-for="(item,index) in lists" :key="index">
					<view class="distribution-product-group__item__header">
						<view class="ordersn">
							订单号{{item.ordersn}}
						</view>
						<view class="status">
							{{item.status_name}}
						</view>
					</view>
					<view class="distribution-product-group__item__main">
						<view class="hd">
							<image :src="item.litpic" mode="aspectFill"></image>
							<view class="typename" v-if="item.typeid">
								{{getModelName(item.typeid)}}
							</view>
						</view>
						<view class="bd">
							<view class="title">
								{{item.productname}}
							</view>
							<view class="info">下单日期：{{item.addtime}}</view>
							<view class="info">客户：{{item.member.nickname}}</view>
						</view>
					</view>
					<view class="distribution-product-group__item__footer">
						<view class="list">
							总额:￥<text class="price">{{item.totalprice}}</text>
						</view>
						<view class="list">
							分销商:<block v-if="item.parent_member">{{item.parent_member.nickname}}</block><block v-else>--</block>
						</view>
						
						<view class="list" v-if="item.status == 5">
							收益:￥{{item.fenxiao_amount}}
						</view>
						<view class="list" v-else>
							待结算:￥<block v-if="item.status == 2">{{item.commission_amount}}</block><block v-else>0.00</block>
						</view>
					</view>
				</view>
				
				<!-- 无数据 -->
				<st-empty-msg v-if="total <= 0 && loadStatus =='noMore'" :noMsg="noMsg" :showHande="false" @onClick="jumpLineIndex"></st-empty-msg>
				
				<!-- 加载动画 -->
				<uni-load-more v-if="total > 0 || loadStatus =='loading'" :status="loadStatus"></uni-load-more>
				
			</view>
		</view>

		<!-- 遮罩 -->
		<view class="layer-shadow" v-if="currentFilter!=-1" @click="closeModel"></view>

		<!-- 分销筛选 -->
		<view v-if="currentFilter==1" class="layer-sort-box">
			<view v-for="(item,index) in conditionInfo.rank" :key="index" class="item" :class="{on:requestInfo.rank==item.id}"
			 @click="changeFilter(item.id,'rank')">{{item.name}}<text v-if="requestInfo.rank==item.id" class="iconfont">&#xe6e6;</text></view>
		</view>

		<!-- 订单状态 -->
		<view v-if="currentFilter==2" class="layer-sort-box">
			<view v-for="(item,index) in conditionInfo.status" :key="index" class="item" :class="{on:requestInfo.status===item.id}"
			 @click="changeFilter(item.id,'status')">{{item.name}}<text v-if="requestInfo.status===item.id" class="iconfont">&#xe6e6;</text></view>
		</view>
		
		<!-- 产品类型 -->
		<view v-if="currentFilter==3" class="layer-sort-box">
			<view v-for="(item,index) in conditionInfo.model" :key="index" class="item" :class="{on:requestInfo.model==item.id}"
			 @click="changeFilter(item.id,'model')">{{item.modulename}}<text v-if="requestInfo.model===item.id" class="iconfont">&#xe6e6;</text></view>
		</view>
		
		<!-- 排序 -->
		<view v-if="currentFilter==4" class="layer-sort-box">
			<view v-for="(item,index) in conditionInfo.order" :key="index" class="item" :class="{on:requestInfo.order==item.id}"
			 @click="changeFilter(item.id,'order')">{{item.name}}<text v-if="requestInfo.order===item.id" class="iconfont">&#xe6e6;</text></view>
		</view>
	</view>
</template>

<script>
	import stTopSearch from "@/components/st-top-search.vue"
	import global_config from "@/global.config.js"
	import stEmptyMsg from "@/components/st-empty-msg/st-empty-msg.vue"
	import uniLoadMore from "@/components/uni-load-more/uni-load-more.vue"
	import {get_modelname_typeid} from "@/utils/utils.js"
	export default {
		components: {
			stTopSearch
		},
		data() {
			return {
				currentFilter: -1,
				conditionInfo: {},
				requestInfo: {
					rank: '',
					status:'',
					order:'',
					model:'',
				},
				page:1,
				pagesize:10,
				total:0,
				lists:[],
				keyword:'',
				loadStatus: 'more',
				noMsg: '抱歉，没有找到符合条件的订单！',
			}
		},
		onLoad() {
			this.miniType = global_config.miniType;
			this.openProduct = global_config.openProduct;
			// 获取筛选条件
			this.getPorductCondition();
			
			// #ifdef H5
			// 禁止分享
			this.$share({hideShare:true});
			// #endif
		},
		onReachBottom() {
			this.getList();
		},
		methods: {
			// 获取筛选条件
			async getPorductCondition(){
				let params = {
					method: 'api/v2/distributor/get_order_condition',
					mini_type: this.miniType
				};
				
				uni.showLoading({
					title:'加载中...'
				})
				let res = await this.$http(params);
				uni.hideLoading();
				
				if(res.status)
				{
					this.conditionInfo = res.data;
					let model = res.data.model, newModel = [{id:'',modulename:'所有产品'}];
					model.map(item=> {
						if(this.openProduct.includes(parseInt(item.id)))
						{
							newModel.push(item);
						}
					})
					this.conditionInfo.model = newModel;
					
					// 初始化获取产品数据
					this.getList();
				}
			},
			
			//获取订单收益
			async getList(){
				
				let params = {
					method: 'api/v2/distributor/get_order',
					keyword: this.keyword,
					typeid: this.requestInfo.model,
					status: this.requestInfo.status,
					order:this.requestInfo.order,
					rank:this.requestInfo.rank,
					page: this.page,
					pagesize: this.pagesize
				};
				
				if (this.loadStatus != 'more') {
					return
				}
				
				this.loadStatus = 'loading';
				
				let res = await this.$http(params);
						
				if(res.status)
				{
					this.lists = [...this.lists,...res.data.list];
					this.loadStatus = 'noMore';
					this.total = res.data.total;
					let nowsize = this.page * this.pagesize;
					if (nowsize < this.total && this.total > 0) {
						this.page = this.page + 1;
						this.loadStatus = 'more';
					}
				}
			},
			
			// 切换筛选分类
			changeFilter(id,key){
				this.requestInfo[key]= id;
				this.currentFilter = -1;
				// 重新加载数据
				this.resetPage();
			},
			
			// 初始化数据
			resetPage(){
				this.offset = 0;
				this.page = 1;
				this.lists = [];
				this.loadStatus = 'more';
				this.getList();
			},
			
			// 获取当前筛选选项类
			getCurrentItem(index) {
				this.currentFilter = index;
			},
			// 弹窗取消按钮
			closeModel() {
				this.currentFilter = -1;
			},
			
			// 获取模块名
			getModelName(typeid){
				return get_modelname_typeid(typeid);
			}
		}
	}
</script>

<style lang="scss">
	
	.header{
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 111;
		/* #ifdef H5 */
		top: var(--window-top);
		/* #endif */
	}

	// 列表
	.search-top {
		padding-top: 180rpx !important;
	}

	.table-view-block {
		padding: 20rpx 0 0;
		background: $uni-bg-color-grey;
		min-height: calc(100vh - 270rpx);
	}

	.distribution-product-group {
		padding: 0 24rpx;

		&__item {
			padding: $uni-spacing-col-lg;

			background: $uni-bg-color;
			margin-top: $uni-spacing-col-lg;
			border-radius: 8rpx;

			// 顶部内容
			&__header {
				display: flex;
				justify-content: space-between;
				margin-bottom: 22rpx;

				.ordersn {
					font-size: 22rpx;
					color: $uni-text-color-disable;
				}

				.status {
					font-size: $uni-font-size-sm;
					color: $uni-text-color-price;
				}
			}

			// 主体内容
			&__main {
				display: flex;

				.hd {
					flex: 0 0 auto;
					width: 180rpx;
					height: 180rpx;
					overflow: hidden;
					border-radius: 8rpx;
					margin-right: 20rpx;
					position: relative;

					image {
						width: 100%;
						height: 100%;
					}

					.typename {
						position: absolute;
						top: 0;
						color: $uni-text-color-inverse;
						background: rgba(0, 0, 0, .5);
						font-size: $uni-font-size-mini;
						padding: 2px 6px;
						right: 0;
						border-bottom-left-radius: 4px;
					}
				}

				.bd {
					flex: 1 1 auto;

					.title {
						font-size: $uni-font-size-base;
						color: $uni-text-color;
						overflow: hidden;
						text-overflow: ellipsis;
						display: -webkit-box;
						-webkit-line-clamp: 2;
						-webkit-box-orient: vertical;
						height: 76rpx;
						margin-bottom: 12rpx;
						word-break: break-all;
					}

					.info {

						font-size: $uni-font-size-sm;
						color: $uni-text-color-deep;
						line-height: 46rpx;
					}
				}
			}

			// 底部内容
			&__footer {
				display: flex;
				justify-content: space-between;
				font-size: $uni-font-size-sm;
				color: $uni-text-color;
				margin-top: 28rpx;

				.list {
					width: 33.3%;
					@extend .ellipse;
					text-align: center;
					padding: 0 8rpx 0;
					border-right: 2rpx solid $uni-border-color;

					&:last-child {
						border-right: none;
						padding-right: 0;
						color: $uni-text-color-price;
					}

					&:first-child {
						padding-left: 0;

						.price {
							font-size: $uni-font-size-base;
						}
					}
				}
			}

		}
	}

	// 筛选
	.filter-tip-bar {
		@extend .displayflex;
		box-shadow: 0 20rpx 30rpx rgba(0, 0, 0, 0.1);
		background: #fff;
		&__item {
			@extend .flex1;
			height: 84rpx;
			line-height: 84rpx;
			text-align: center;
			font-size: $uni-font-size-sm;

			&:after {
				content: '';
				display: inline-block;
				width: 0;
				height: 0;
				border-top: 8rpx solid #535353;
				border-left: 8rpx solid transparent;
				border-right: 8rpx solid transparent;
				vertical-align: middle;
				margin: 2rpx 0 0 8rpx;
				transition: all 0.3s;
			}

			&.active {
				color: #2dbb55;

				&:after {
					border-top-color: #2dbb55;
					margin-top: -4rpx;
					transform: rotate(180deg);
				}
			}
		}
	}

	// 遮罩
	.layer-shadow {
		position: fixed;
		top: 104rpx;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 1;
		background: $uni-bg-color-mask;
	}

	// 排序
	.layer-sort-box {
		position: fixed;
		/* #ifdef H5 */
		top: 264rpx;
		/* #endif */
		/* #ifdef MP-WEIXIN */
		top: 180rpx;
		/* #endif */
		left: 0;
		right: 0;
		z-index: 2;
		background-color: $uni-bg-color;
	}

	.layer-sort-box {
		padding: 0 25rpx;
		font-size: $uni-font-size-sm;

		.item {
			@extend .justifyspacec;
			height: 70rpx;
			padding-right: 14rpx;
			border-bottom: 1rpx solid $uni-border-color;

			&:last-child {
				border-bottom: none;
			}

			&.on {
				color: $uni-color-primary;
			}
		}

		.iconfont {
			font-size: 18rpx;
		}
	}
</style>
